<template>
    <el-container class="login-container">
        <el-row justify="center" align="middle" class="full-height">
            <!-- 调整栅格系统，增加大屏幕宽度 -->
            <el-col :xs="24" :sm="22" :md="18" :lg="14" :xl="10">
                <el-card class="login-card">
                    <!-- 添加Logo和标题 -->
                    <div class="login-header">
                        <!-- <el-avatar shape="square" size="large" class="login-logo"> -->
                        <!-- <img src="/src/assets/logo.png" alt="Logo" /> -->
                        <!-- </el-avatar> -->
                        <h2 class="login-title">HudsonMQ 管理系统</h2>
                    </div>

                    <!-- 错误提示 -->
                    <el-alert v-if="errorMsg" type="error" :closable="false" class="login-alert">{{
                        errorMsg
                    }}
                    </el-alert>

                    <el-form ref="formRef" :model="formData" :rules="rules" label-position="top" class="login-form">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="formData.username" placeholder="请输入用户名" prefix-icon="User" clearable />
                        </el-form-item>

                        <el-form-item label="密码" prop="password">
                            <el-input v-model="formData.password" type="password" show-password placeholder="请输入密码"
                                prefix-icon="Lock" clearable />
                        </el-form-item>

                        <el-form-item class="form-actions">
                            <el-checkbox v-model="rememberMe" class="remember-me">记住我
                            </el-checkbox>
                            <el-link type="primary" :underline="false" class="forgot-password">
                                忘记密码?
                            </el-link>
                        </el-form-item>

                        <el-button type="primary" @click="handleLogin" style="width: 100%" size="large">
                            登录
                        </el-button>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </el-container>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import service from '@/request/index.ts'
import { useRouter } from 'vue-router'

const formRef = ref<FormInstance>()
const errorMsg = ref('')

const formData = reactive({
    username: '',
    password: ''
})

const rememberMe = ref(false)
const router = useRouter()

// 增强表单验证规则
const rules: FormRules = {
    username: [
        // {required: true, message: '用户名不能为空', trigger: 'blur'},
        // {min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur'},
        // {
        //     pattern: /^[a-zA-Z0-9_-]{3,20}$/,
        //     message: '用户名只能包含字母、数字、下划线和连字符',
        //     trigger: 'blur'
        // }
    ],
    password: [
        // {required: true, message: '密码不能为空', trigger: 'blur'},
        // {min: 6, message: '密码至少6位', trigger: 'blur'},
        // {
        //     pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/,
        //     message: '密码需包含大小写字母和数字',
        //     trigger: 'blur'
        // }
    ]
}

const handleLogin = async () => {
    errorMsg.value = ''
    await formRef.value?.validate()

    const response: string = await service.post("/user/login", {
        userName: formData.username,
        password: formData.password,
    })

    if (response) {
        localStorage.setItem('token', response)
        ElMessage.success('登录成功');
        // 跳转到 home 页面
        router.push('/')  // 或 router.push({ name: 'Home' })
    }

}
</script>

<style scoped>
.login-container {
    height: 100vh;
    background: linear-gradient(135deg, #051c3d 0%, #c3cfe2 100%);
}

.login-card {
    width: 400px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transform: translateX(600px);
    background: #22425f;
}

.login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
}

.login-logo {
    margin-bottom: 15px;
    border-radius: 8px;
    background-color: #fff;
    padding: 10px;
}

.login-title {
    color: #1890ff;
    margin: 0;
    font-weight: 600px;
}

.login-alert {
    margin-bottom: 20px;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.forgot-password {
    font-size: 14px;
    transform: translateX(220px);
}

.login-form {
    margin-top: 15px;
}
</style>
